<%@ page import="edu.auctionmart.Auction" %>
<!doctype html>
<html>
	<head>
		<meta name="layout" content="main"/>
		<title>Welcome to AuctionMart</title>
		<style type="text/css" media="screen">
			#status {
				background-color: #eee;
				border: .2em solid #fff;
				margin: 2em 2em 1em;
				padding: 1em;
				width: 12em;
				float: left;
				-moz-box-shadow: 0px 0px 1.25em #ccc;
				-webkit-box-shadow: 0px 0px 1.25em #ccc;
				box-shadow: 0px 0px 1.25em #ccc;
				-moz-border-radius: 0.6em;
				-webkit-border-radius: 0.6em;
				border-radius: 0.6em;
			}

			.ie6 #status {
				display: inline; /* float double margin fix http://www.positioniseverything.net/explorer/doubled-margin.html */
			}

			#status ul {
				font-size: 0.9em;
				list-style-type: none;
				margin-bottom: 0.6em;
				padding: 0;
			}

			#status h1 {
				text-transform: uppercase;
				font-size: 1.1em;
				margin: 0 0 0.3em;
			}

			#page-body {
				margin: 1em 1em 1.25em 2em;
			}

			h2 {
				margin-top: 1em;
				margin-bottom: 0.3em;
				font-size: 1em;
			}

			p {
				margin: 0.25em 0;
			}

			#controller-list ul {
				list-style-position: inside;
			}

			#controller-list li {
				list-style-position: inside;
				margin: 0.25em 0;
			}

		</style>
	</head>
	<body>
		<div id="searchBar">
	       	<g:form name="searchForm" url="[controller:'index', action:'search']">
	       		<g:textField class="searchBar" name="searchItem" value="${itemInstance?.name}"/>
	       		<g:select name="searchCategory" from="${edu.auctionmart.ItemCategory?.values()}" keys="${edu.auctionmart.ItemCategory.values()*.name()}" value="${itemInstance?.category?.name()}"/>
	       		<g:submitButton class="searchButton" name="search" value="Search"/>
	       		<g:submitButton class="searchButton" name="clear" value="Clear"/>
	       	</g:form>
       	</div>   		
	
		<div id="page-body" role="main">
			<h1>Welcome to AuctionMart</h1>
			<p>Top 20 Auctions ending soonest are displayed.</p>
			
				<g:if test="${auctions.size() > 0}">
					<div id="list-auction" class="content scaffold-list" role="main">
						<h1>Auctions Ending Soonest</h1>
						<g:if test="${flash.message}">
						<div class="message" role="status">${flash.message}</div>
						</g:if>
						<table>
							<thead>
								<tr>
									<th><g:message code="Auction Link" /></th>
														
									<th><g:message code="auction.seller.label" default="Seller" /></th>
								
									<th><g:message code="auction.item.label" default="Item" /></th>
								
									<g:sortableColumn property="auctionTitle" title="${message(code: 'auction.auctionTitle.label', default: 'Auction Title')}" />
								
									<g:sortableColumn property="startTime" title="${message(code: 'auction.startTime.label', default: 'Start Time')}" />
								
									<g:sortableColumn property="endTime" title="${message(code: 'auction.endTime.label', default: 'End Time')}" />
									
									<g:sortableColumn property="isEnded" title="${message(code: 'auction.status.label', default: 'Status')}" />
								
								</tr>
							</thead>
							<tbody>
							<g:each in="${auctions}" status="i" var="auctionInstance">
								<tr class="${(i % 2) == 0 ? 'even' : 'odd'}">
								
									<td><g:link controller="auction" action="show" id="${auctionInstance.id}">See Auction</g:link></td>
									
									<td>${fieldValue(bean: auctionInstance, field: "seller")}</td>
								
									<td>${fieldValue(bean: auctionInstance, field: "item")}</td>
								
									<td>${fieldValue(bean: auctionInstance, field: "auctionTitle")}</td>
								
									<td>${fieldValue(bean: auctionInstance, field: "formattedStartTime")}</td>
								
									<td>${fieldValue(bean: auctionInstance, field: "formattedEndTime")}</td>
									
									<td>${fieldValue(bean: auctionInstance, field: "status")}</td>
								
								</tr>
							</g:each>
							</tbody>
						</table>
					</div>
				</g:if>
			</div>
	</body>
</html>
